<template lang="pug">

.rating-select-wrapper
  cube-checker(v-model="m_currentGroup"
               :options="m_ratingGroup"
               type="radio")
    cube-checker-item(v-for="item in m_ratingGroup" :key="item.value" :option="item")
      span.name {{item.text}}
      span.count {{item.count}}
  .line
  .switch(:class="{'only-content':m_onlyContent}")
    cube-checkbox(v-model="m_onlyContent"
                  :option={
                    label:''
                  }) 只看有内容的评价

</template>

<script>

export default {

  props: {

    onlyContent: {
      type: Boolean,
      default: true
    },

    ratingGroup: {
      type: Array,
      default() {
        return [
                {
                  value: 0,
                  text: '全部'
                },
                {
                  value: 1,
                  text: '推荐'
                },
                {
                  value: 2,
                  text: '吐槽'
                }
              ]
      }
    },

    currentGroup: {
      type: Number,
      default: 0
    },

    ratings: {
      type: Array,
      default() {
        return []
      }
    }

  },

  data() {
    return {
      m_currentGroup: this.currentGroup,
      m_onlyContent: this.onlyContent
    }
  },

  computed: {
    m_ratingGroup() {
      let all = 0
      let good = 0
      let bad = 0

      all = this.ratings.length

      this.ratings.forEach((item)=>{
        if(item.rateType===0)
          good++
        if(item.rateType===1)
          bad++
      })

      let ret = this.ratingGroup
      ret[0].count=all
      ret[1].count=good
      ret[2].count=bad

      console.log('m_ratingGroup')
      console.log(ret)
      return ret
    }
  },

  watch: {

    m_currentGroup(newVal) {
      // 将选中评教类型通过事件传递给父组件
      this.$emit('sendCurrentGroup', newVal)
    },

    m_onlyContent(newVal) {
      // 将是否显示有内容评价通过事件传递给父组件
      this.$emit('sendOnlyContent', newVal)
    }

  }

}


</script>

<style lang="stylus" scoped>
@import "../../static/common/stylus/variable"

.rating-select-wrapper
  >>> .cube-checker
    margin-top:12px
  >>> .cube-checker-item
    background:$color-light-grey-s
    .name
      font-size:$font-size-medium
    .count
      margin-left:4px
      font-size:14px
  >>> .cube-checker-item_active
    background:$color-blue
    color:$color-white
  >>> .cube-checker-item_active:after
    border:none
  .line
    margin-top:18px
    flex:1
    border-top:solid 1px $color-background-ssss
    height:1px
    position:relative
    top:7px
  .switch
    position:relative
    margint-bottom:100px
    >>> .cube-checkbox
      font-size:24px
      padding-left:0
      &.cube-checkbox_checked
        .cubeic-right::before
          color:$color-blue
      .cube-checkbox-label
        font-size:$fontsize-large-xx
      
</style>
